<template>
  <div>
    <headNav title="家长审核" ></headNav>
    <div class="flexHeight" >
      <div class="flexAlign columnCss" v-for="(val, index) in titleData" :key="index" >
        <div class="flexCenter" >
          <span>{{val.title}}：</span>
        </div>
        <input type="text" :value="val.val" disabled />
      </div>
      <div class="flexAlign columnCss" >
        <span>人脸图像：</span>
        <img v-if="!personalData.faceImgUrl" src="@/assets/img/default_heads.png" alt="" >
        <img v-else :src="personalData.faceImgUrl" alt="" >
      </div>
      <div class="flexAlign columnCss" >
        <span>申请时间：</span>
        <span>{{personalData.createTime}}</span>
      </div>
      <div class="flexCenter columnCss" >
        <button type="default" @click="singleTrialClick(1)" >确认通过</button>
        <button type="default" @click="singleTrialClick(2)" style="background: #FFF; color: #128FEF; margin-left: 0.3rem; " >驳回申请</button>
      </div>
    </div>


    <!-- 学生重名弹窗 -->
    <x-dialog v-model="showHideOnBlur" class="dialog-demo xdialog" hide-on-blur>
     <div class="flexHeight popupCss" style="overflow: scroll; max-height: 14rem; " >
        <span style="margin: 0.4rem 0;" >请选择是哪位学生</span>
        <div class="flexHeight stripCss" v-for="(val, index) in conflictList" :key="index" 
        :class="{borderCss: num.id == val.id }" @click="num = val" >
          <img src="@/assets/img/my/yesBlue.png" mode="" v-if="num == val" >
          <span class="nameCss" >学生姓名：{{val.studentName}}</span>
          <span>学籍号：{{val.studentCode}}</span>
          <span>证件号：{{val.idNumber}}</span>
          <span>家长手机：{{val.parentPhone}}</span>
        </div>
        <div class="flexCenter" >
          <button type="default" @click="doubleNameClick()" >确定</button>
          <button type="default" style="margin-left: 0.3rem;" @click="showHideOnBlur = false" >关闭</button>
        </div>
     </div>
    </x-dialog>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getDictionariesApi, postSingleTrialApi } from '@/api/myNewApi'
import { XDialog } from 'vux'
export default {
  components: {
    headNav,
    XDialog
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode
    })
  },
  data () {
    return {
      num: '',     // 冲突选中的条目
      conflictList: [],  // 冲突的数组
      idTypeCodeArr: '',   // 证件类型枚举数组
      relativesArr: '',    // 亲属枚举数组
      personalData: '',     // 选中学生数据
      showHideOnBlur: false,   // 学生重名弹窗
      titleData: [
        {id: 1, title: '孩子姓名', val: '' },
        {id: 2, title: '性  别', val: '' },
        {id: 3, title: '入学年月', val: '' },
        {id: 4, title: '证件类型', val: '' },
        {id: 5, title: '证件号', val: '' },
        {id: 6, title: '亲属关系', val: '' }
      ]
    }
  },
  methods: {
    // 重名弹窗确定事件
    async doubleNameClick () {
      if (!this.num) {
        this.$vux.toast.text('请选择至少一个学生', 'middle')
        return
      }
      let params = {
        studentApprovalId: this.studentApproval,
        status: this.statu,
        checkedStudentId: this.num.studentId,
        isNewStudent: false
      }
      await postSingleTrialApi(params)
      this.$router.push('toExamineList')
      this.$vux.toast.text('操作成功', 'middle')
    },
    // 通过驳回按钮触发事件
    async singleTrialClick (e) {
      this.num = ''
      this.conflictList = []
      this.studentApproval = this.personalData.id
      this.statu = e
      let params = {
        studentApprovalId: this.personalData.id,
        status: e,
        checkedStudentId: '',
        isNewStudent: false
      }
      this.$vux.confirm.show({
          title: '提示',
          content: '是否确定执行该操作？',
          onConfirm : async () => {
            // ——————————————————————————————————————————
            let res = await postSingleTrialApi(params)
            if (res.isSuccess) {
              this.$router.push('toExamineList')
              this.$vux.toast.text('操作成功', 'middle')
            } else {
              // ——————————————————————————————————————————
              
              this.$vux.confirm.show({
                  title: '提示',
                  content: '该学生已有同名，是否为同一学生？',
                 confirmText: '是',
                 cancelText: '否',
                  onConfirm : async () => {
                    this.showHideOnBlur = true
                    for (let checking of res.checkingStudents) {
                      this.conflictList.push(checking)
                    }
                  },
                  onCancel: async () => {
                    params.isNewStudent = true
                    await postSingleTrialApi(params)
                    this.$router.push('toExamineList')
                    this.$vux.toast.text('操作成功', 'middle')
                  }
              })
              
            }
          },
          onCancel () {
          }
      })

    },
    // 获取字典请求封装 && 处理基本信息
    async packrelationCode () {
      let params = {
        typeCode: 'FamilyRelation'
      }
      this.relativesArr = await getDictionariesApi(params)
      params.typeCode = 'IdCardType'
      this.idTypeCodeArr = await getDictionariesApi(params)
      // 取出个人信息
      this.personalData = JSON.parse(localStorage.dealingIndividuals)
      this.handleEnumeration()
      this.titleData[0].val = this.personalData.studentName
      this.personalData.gender ? this.titleData[1].val = '男' : this.titleData[1].val = '女'
      this.titleData[2].val = this.personalData.enrolmentDate
      this.titleData[3].val = this.personalData.idTypeCodes
      this.titleData[4].val = this.personalData.idNumber
      this.titleData[5].val = this.personalData.relationCodes
      console.log(this.personalData)
    },
    // 循环处理枚举数组
    handleEnumeration () {
      for (let i of this.relativesArr) {
        if (this.personalData.relationCode == i.valCode) {
          this.$set(this.personalData, 'relationCodes', i.valName)
        }
      }
      for (let j of this.idTypeCodeArr ) {
        if (this.personalData.idTypeCode == j.valCode) {
          this.$set(this.personalData, 'idTypeCodes', j.valName)
        }
      }
    }
  },
  mounted() {
    this.packrelationCode()
  }
}
</script>

<style lang="less" scoped >
.popupCss {
  align-items: center;
  // justify-content: center;
  color: #666666;
  font-size: 0.32rem;
  button {
    width: 2.4rem;
    height: 0.75rem;
    background: #128FEF;
    color: #FFF;
    border-radius: 0.38rem;
    font-size: 0.32rem;
    border: 0;
    margin: 0.2rem 0 0.4rem 0;
  }
  .stripCss {
    width: 5.8rem;
    height: 2.65rem;
    background: #FFF;
    border-radius: 0.15rem;
    border: 1px solid #a8a7ac;
    margin: 0.1rem 0 0.2rem 0;
    color: #666666;
    font-size: 0.28rem;
    align-items: baseline;
    position: relative;
    span {
      margin-top: 0.2rem;
      margin-left: 0.2rem;
    }
    img {
      position: absolute;
      top: 0;
      right: 0;
      width: 0.96rem;
      height: 0.83rem;
    }
    .nameCss {
      font-size: 0.32rem;
      font-weight: 600;
      color: #000;
    }
  }
}

.columnCss {
  width: 6.6rem;
  height: 1rem;
  margin: 0.3rem 0 0 0.3rem;
  font-size: 0.28rem;
  input {
    width: 4.8rem;
    height: 0.85rem;
    padding-left: 0.2rem;
    font-size: 0.28rem;
  }
  div {
    width: 1.5rem;
  }
  img {
    width: 0.84rem;
    height: 0.84rem;
    border-radius: 2rem;
  }
  button {
    width: 3rem; 
    height: 0.85rem; 
    background: #128FEF; 
    color: #FFF; 
    border-radius: 0.4rem; 
    font-size: 0.32rem;
    border: 1px solid #128FEF;
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xdialog .weui-dialog {
  padding: 0 0.4rem;
  width: 90%;
  max-width:370px;
}
</style>
